import { useState, useEffect, useRef } from "react";

function UseRefComp2() {
  let timer = useRef(null);
  const [counter, setCounter] = useState(1);
  console.log("render");
  useEffect(() => {
    timer.current = setInterval(() => {
      console.log(timer.current);
      console.log("触发了");
    }, 1000);
    // 组件在严格模式下React.StrictMode会被调用两次，因此需要在useEffect中清除定时器
    return () => {
      clearTimeout(timer.current);
    };
  }, []);

  const clearTimer = () => {
    console.log("停止", timer.current);
    clearInterval(timer.current);
  };

  function clickHandle() {
    console.log(timer);
    setCounter(counter + 1);
  }

  return (
    <>
      <h3>
        *useRef* 还接受一个初始值，这在用作关联 *DOM*
        元素时通常没什么用，但是在作为**存储不需要变化**的全局变量时则非常方便。
      </h3>
      <div>{counter}</div>
      <button onClick={clickHandle}>+1</button>
      <button onClick={clearTimer}>停止</button>
    </>
  );
}

export default UseRefComp2;
